<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成员详情 - 家族树</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background-color: #f8f8f8;
            color: #333;
            margin: 0;
            padding: 0;
            padding-bottom: 83px; /* 为底部导航栏留出空间 */
        }
        
        /* 状态栏样式 */
        .status-bar {
            height: 44px;
            background-color: #ffffff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            position: sticky;
            top: 0;
            z-index: 100;
            border-bottom: 1px solid #f0f0f0;
        }
        
        /* 导航栏 */
        .nav-bar {
            height: 44px;
            display: flex;
            align-items: center;
            padding: 0 16px;
            background-color: #ffffff;
            border-bottom: 1px solid #f0f0f0;
            position: relative;
        }
        
        .back-button {
            position: absolute;
            left: 16px;
            font-size: 20px;
            color: #333;
        }
        
        .page-title {
            flex: 1;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
        }
        
        .action-button {
            position: absolute;
            right: 16px;
            font-size: 20px;
            color: #333;
        }
        
        /* 底部导航栏样式 */
        .tab-bar {
            height: 83px;
            background-color: #ffffff;
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            border-top: 1px solid #f0f0f0;
            padding-bottom: 20px; /* 适配iPhone底部安全区域 */
        }
        
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #999;
            font-size: 10px;
            padding: 8px 0;
        }
        
        .tab-item.active {
            color: #e86c60; /* 主题色 */
        }
        
        .tab-icon {
            font-size: 22px;
            margin-bottom: 4px;
        }
        
        /* 个人资料卡片 */
        .profile-card {
            background-color: white;
            border-radius: 12px;
            margin: 16px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .profile-header {
            background-color: #e86c60;
            padding: 24px 16px;
            color: white;
            text-align: center;
        }
        
        .profile-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 4px solid white;
            object-fit: cover;
            margin: 0 auto 16px;
        }
        
        .profile-name {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .profile-info {
            font-size: 14px;
            opacity: 0.9;
        }
        
        .profile-actions {
            display: flex;
            justify-content: space-around;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .profile-action {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #666;
            font-size: 12px;
        }
        
        .profile-action-icon {
            font-size: 20px;
            margin-bottom: 4px;
            color: #e86c60;
        }
        
        /* 信息列表 */
        .info-list {
            padding: 16px;
        }
        
        .info-item {
            display: flex;
            margin-bottom: 16px;
        }
        
        .info-icon {
            width: 24px;
            color: #e86c60;
            margin-right: 12px;
        }
        
        .info-content {
            flex: 1;
        }
        
        .info-label {
            font-size: 14px;
            color: #999;
            margin-bottom: 4px;
        }
        
        .info-value {
            font-size: 16px;
            color: #333;
        }
        
        /* 关系卡片 */
        .relations-card {
            background-color: white;
            border-radius: 12px;
            margin: 16px;
            padding: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .card-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 16px;
            color: #333;
        }
        
        .relation-list {
            display: flex;
            flex-wrap: wrap;
        }
        
        .relation-item {
            width: 33.333%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .relation-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 8px;
            border: 2px solid #e86c60;
        }
        
        .relation-name {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 4px;
            text-align: center;
        }
        
        .relation-type {
            font-size: 12px;
            color: #999;
            text-align: center;
        }
        
        /* 照片墙 */
        .photos-card {
            background-color: white;
            border-radius: 12px;
            margin: 16px;
            padding: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .photos-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
        
        .photo-item {
            aspect-ratio: 1;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .photo-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <!-- iOS状态栏 -->
    <div class="status-bar">
        <div class="time font-medium">9:41</div>
        <div class="icons flex">
            <i class="fas fa-signal mr-1"></i>
            <i class="fas fa-wifi mr-1"></i>
            <i class="fas fa-battery-full"></i>
        </div>
    </div>
    
    <!-- 导航栏 -->
    <div class="nav-bar">
        <a href="family_tree.html" class="back-button">
            <i class="fas fa-chevron-left"></i>
        </a>
        <div class="page-title">成员详情</div>
        <a href="#" class="action-button">
            <i class="fas fa-ellipsis-h"></i>
        </a>
    </div>
    
    <!-- 个人资料卡片 -->
    <div class="profile-card">
        <div class="profile-header">
            <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="张明" class="profile-avatar">
            <div class="profile-name">张明</div>
            <div class="profile-info">1975年生 · 第三代</div>
        </div>
        
        <div class="profile-actions">
            <div class="profile-action">
                <i class="profile-action-icon fas fa-edit"></i>
                <span>编辑</span>
            </div>
            <div class="profile-action">
                <i class="profile-action-icon fas fa-share-alt"></i>
                <span>分享</span>
            </div>
            <div class="profile-action">
                <i class="profile-action-icon fas fa-comment-dots"></i>
                <span>私信</span>
            </div>
        </div>
        
        <div class="info-list">
            <div class="info-item">
                <div class="info-icon">
                    <i class="fas fa-birthday-cake"></i>
                </div>
                <div class="info-content">
                    <div class="info-label">出生日期</div>
                    <div class="info-value">1975年6月15日</div>
                </div>
            </div>
            
            <div class="info-item">
                <div class="info-icon">
                    <i class="fas fa-map-marker-alt"></i>
                </div>
                <div class="info-content">
                    <div class="info-label">出生地</div>
                    <div class="info-value">江苏省南京市</div>
                </div>
            </div>
            
            <div class="info-item">
                <div class="info-icon">
                    <i class="fas fa-briefcase"></i>
                </div>
                <div class="info-content">
                    <div class="info-label">职业</div>
                    <div class="info-value">软件工程师</div>
                </div>
            </div>
            
            <div class="info-item">
                <div class="info-icon">
                    <i class="fas fa-graduation-cap"></i>
                </div>
                <div class="info-content">
                    <div class="info-label">学历</div>
                    <div class="info-value">南京大学 计算机科学 硕士</div>
                </div>
            </div>
            
            <div class="info-item">
                <div class="info-icon">
                    <i class="fas fa-heart"></i>
                </div>
                <div class="info-content">
                    <div class="info-label">婚姻状况</div>
                    <div class="info-value">已婚</div>
                </div>
            </div>
            
            <div class="info-item">
                <div class="info-icon">
                    <i class="fas fa-phone"></i>
                </div>
                <div class="info-content">
                    <div class="info-label">联系电话</div>
                    <div class="info-value">138****5678</div>
                </div>
            </div>
            
            <div class="info-item">
                <div class="info-icon">
                    <i class="fas fa-envelope"></i>
                </div>
                <div class="info-content">
                    <div class="info-label">电子邮箱</div>
                    <div class="info-value">zhang****@example.com</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 家族关系卡片 -->
    <div class="relations-card">
        <div class="card-title">家族关系</div>
        
        <div class="relation-list">
            <div class="relation-item">
                <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="张建国" class="relation-avatar">
                <div class="relation-name">张建国</div>
                <div class="relation-type">父亲</div>
            </div>
            
            <div class="relation-item">
                <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="王丽" class="relation-avatar">
                <div class="relation-name">王丽</div>
                <div class="relation-type">母亲</div>
            </div>
            
            <div class="relation-item">
                <img src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="张强" class="relation-avatar">
                <div class="relation-name">张强</div>
                <div class="relation-type">弟弟</div>
            </div>
            
            <div class="relation-item">
                <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="李芳" class="relation-avatar">
                <div class="relation-name">李芳</div>
                <div class="relation-type">配偶</div>
            </div>
            
            <div class="relation-item">
                <img src="https://images.unsplash.com/photo-1555952517-2e8e729e0b44?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="张小明" class="relation-avatar">
                <div class="relation-name">张小明</div>
                <div class="relation-type">儿子</div>
            </div>
        </div>
    </div>
    
    <!-- 照片墙 -->
    <div class="photos-card">
        <div class="card-title">照片墙</div>
        
        <div class="photos-grid">
            <div class="photo-item">
                <img src="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="照片" class="photo-image">
            </div>
            <div class="photo-item">
                <img src="https://images.unsplash.com/photo-1516834474-48c0abc2a902?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="照片" class="photo-image">
            </div>
            <div class="photo-item">
                <img src="https://images.unsplash.com/photo-1523450001312-faa4e2e37f0f?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="照片" class="photo-image">
            </div>
            <div class="photo-item">
                <img src="https://images.unsplash.com/photo-1484712401471-05c7215830eb?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="照片" class="photo-image">
            </div>
            <div class="photo-item">
                <img src="https://images.unsplash.com/photo-1529634806980-85c3dd6d34ac?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="照片" class="photo-image">
            </div>
            <div class="photo-item">
                <img src="https://images.unsplash.com/photo-1542037104857-ffbb0b9155fb?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="照片" class="photo-image">
            </div>
        </div>
    </div>
    
    <!-- 底部导航栏 -->
    <div class="tab-bar">
        <a href="home.html" class="tab-item">
            <i class="tab-icon fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="family_tree.html" class="tab-item active">
            <i class="tab-icon fas fa-sitemap"></i>
            <span>家谱</span>
        </a>
        <a href="family_activity.html" class="tab-item">
            <i class="tab-icon fas fa-calendar-alt"></i>
            <span>活动</span>
        </a>
        <a href="family_stories.html" class="tab-item">
            <i class="tab-icon fas fa-book"></i>
            <span>故事</span>
        </a>
        <a href="profile.html" class="tab-item">
            <i class="tab-icon fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>
</body>
</html> 